<template>
  <div class="gantt-container">
    <div id="gantt"></div>
  </div>
</template>
<script>
import { ProjectListApi } from "@/services/ProjectCenter";
export default {
  data () {
    return {
      choosedProject: {}
    };
  },
  watch: {
    '$store.state.choosedProject': function (val) {
      console.log(val, '444')
      this.choosedProject = val
      this.getProjectGantt()
    },
  },
  methods: {
    // 获取甘特图
    getProjectGantt () {
      ProjectListApi.getProjectGantt({
        params: {
          id: this.choosedProject.project_id
        }
      }).then(res => {
        if (res.code === 0) {
          gantt.config.row_height = 24;
          gantt.config.date_format = "%Y-%m-%d %H:%i";
          gantt.attachEvent("onParse", function () {
            gantt.eachTask(function (task) {
              if (gantt.hasChild(task.id)) {
                task.type = gantt.config.types.project;
                gantt.updateTask(task.id);
              } else if (task.duration === 0) {
                task.type = gantt.config.types.milestone;
                gantt.updateTask(task.id);
              }
            });
          });
          // gantt.config.static_background = true;
          gantt.init("gantt");
          gantt.i18n.setLocale("cn");
          gantt.i18n.setLocale({
            labels: {
              icon_save: "保存111",
              icon_cancel: "取消",
              icon_details: "删除",
              gantt_save_btn: "保存",
              gantt_cancel_btn: "取消",
              gantt_delete_btn: "删除"
            }
          });

          gantt.clearAll();
          if (res.data) {
            let data = JSON.parse(res.data.content)
            gantt.config.duration_unit = data.config.duration_unit;
            gantt.parse(data.data);
          }

        }
      })
    }
  },
  created () { },
  mounted () {
    // gantt.i18n.setLocale("zh-CN");
    let store = this.$store.state.choosedProject
    let local = window.localStorage.getItem('choosedProject') || '{}'
    this.choosedProject = store.project_id ? store : JSON.parse(local)
    this.getProjectGantt()

    // gantt.parse({
    //   data: [
    //     { id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, progress: 0.4, open: true },
    //     { id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, progress: 0.6, parent: 1 },
    //     { id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, progress: 0.6, parent: 1 }
    //   ],
    //   links: [
    //     { id: 1, source: 1, target: 2, type: "1" },
    //     { id: 2, source: 2, target: 3, type: "0" }
    //   ]
    // });
  }
};
</script>
<style scoped lang="scss">
.gantt-container {
  width: 100vw;
  height: 800px;
  #gantt {
    width: 100%;
    height: 100%;
  }
}
</style>
